{% layout = 'dashboard/layout_dashboard.html' %}

<div class="container p-4">
    <button type="button" class="btn btn-default mb-4" onclick="return open_share_file();">
        <i class="fa fa-upload mr-1"></i>上传文件
    </button>

    <table class="table table-sm table-bordered">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">文件</th>
                <th scope="col">上传者</th>
                <th scope="col">上传时间</th>
                <th scope="col">大小</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for idx, info in ipairs(shared) do %}
            <tr>
                <th scope="row">{{idx}}</th>
                <td>{{info.name}}</td>
                <td>{{info.creator_name}}</td>
                <td>{{tostring(info.upload_time)}}</td>
                <td>{{tostring(info.size)}}</td>
                <td>
                    <a href="{{info.path}}" class="btn btn-sm btn-primary"><i class="fa fa-download"></i></a>
                    {% if session.uid == info.creator or session.is_su then %}
                    <a onclick="return confirm_del_share('{{info.id}}', '{{info.name}}');" class="btn btn-sm btn-secondary"><i class="fa fa-trash"></i></a>
                    {% end %}
                </td>
            </tr>
            {% end %}
        </tbody>
    </table>

    <!-- 上传分享文件 -->
    <div id="mdl-share-file" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">上传</h5>
                </div>
                <div class="modal-body">
                    <div id="err"></div>

                    <form id="form-share-file">
                        <input type="number" name="is_share" value="1" hidden>

                        <div class="form-group">
                            <label for="share-file-selector">选择文件</label>
                            <input id="share-file-selector" name="file" type="file" class="form-control" required autofocus>
                        </div>
                    </form>

                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="return share_file();">确  定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除分享文件 -->
    <div id="mdl-del-share-file" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog model-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">删除分享文件</h5>
                </div>
                <div class="modal-body">
                    <div id="err"></div>

                    <form id="form-del-share-file">
                        <input id="del_share_file_id" name="id" type="number" hidden>
                        请确认需要删除的文件：<span id="del_share_file" class="text-danger"></span>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="return del_share_file();">确  定</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

$('.modal').on('shown.bs.modal', function(e) {
    var mask = $('.modal-backdrop').detach();
    mask.appendTo('.mainblock');
    $('.modal #err').empty();
});

function open_share_file() {
    $('#mdl-share-file .progress').hide();
    $('#mdl-share-file .progress-bar').css('width', '0%');
    $('#mdl-share-file').modal('show');
}

function confirm_del_share(id, name) {
    $('#mdl-del-share-file #del_share_file_id').val(id);
    $('#mdl-del-share-file #del_share_file').text(name);
    $('#mdl-del-share-file').modal('show');
}

function share_file() {
    $('#form-share-file').hide();
    $('#mdl-share-file .progress').show();

    $.ajax({
        url: '/dashboard/files/upload',
        type: 'POST',
        data: new FormData(document.getElementById('form-share-file')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        xhr: function () {
            var xhr = new window.XMLHttpRequest();
            xhr.upload.addEventListener('progress', function(ev) {
                if (ev.lengthComputable) $('#mdl-share-file .progress-bar').css('width', '' + ((ev.loaded * 1.0 / ev.total) * 100) + '%');
            }, false);
            return xhr;
        },
        success: function(ret) {
            if (ret.ok) {
                $('.modal').modal('hide');
                location.reload();
            } else {
                showError('#mdl-share-file #err', '上传文件失败', '未知问题');
            }
        }
    });
}

function del_share_file() {
    $.ajax({
        url: '/dashboard/files/delete',
        type: 'POST',
        data: new FormData(document.getElementById('form-del-share-file')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(ret) {
            if (ret.ok) {
                $('.modal').modal('hide');
                location.reload();
            } else {
                showError('#mdl-del-share-file #err', '删除文件失败', ret.err_msg);
            }
        }
    });
}
</script>